<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计分析</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body { margin: 0; padding: 0; background: #f5f6fa; display: flex; min-height: 100vh; }
        .main-wrapper {
            display: flex;
            width: 100%;
        }
        .sidebar {
            width: 240px;
            background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
            padding: 0;
            box-shadow: 2px 0 8px rgba(0,0,0,0.07);
            min-height: 100vh;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .sidebar h3 {
            color: #fff;
            font-weight: bold;
            text-align: center;
            padding: 32px 0 16px 0;
            letter-spacing: 2px;
            font-size: 1.3rem;
            margin-bottom: 0;
        }
        .sidebar ul {
            list-style: none;
            padding: 0 0 32px 0;
            margin: 0;
            flex: 1;
        }
        .sidebar ul li {
            margin: 0;
        }
        .sidebar ul li a {
            display: flex;
            align-items: center;
            padding: 14px 32px;
            color: #e3e6f0;
            text-decoration: none;
            font-size: 1.08rem;
            border-left: 4px solid transparent;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
            border-radius: 0 24px 24px 0;
            margin-bottom: 2px;
        }
        .sidebar ul li a:hover,
        .sidebar ul li a.active {
            background: rgba(255,255,255,0.12);
            color: #fff;
            border-left: 4px solid #f6c23e;
            font-weight: bold;
        }
        .sidebar ul li a .icon {
            margin-right: 10px;
            font-size: 1.2em;
        }
        .main-content {
            flex-grow: 1;
            padding: 20px;
            background-color: #f5f6fa;
        }
        .info-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .stat-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .stat-card .stat-title {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .stat-card .stat-value {
            color: #333;
            font-size: 24px;
            font-weight: bold;
        }
        .chart-container {
            height: 400px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="main-wrapper">
    <div class="sidebar">
        <h3>医院病例管理系统</h3>
        <ul>
            <li><a href="/adminStatistics" class="active">统计分析</a></li>
            <li><a href="/adminUserList">用户管理</a></li>
            <li><a href="/adminMedicalRecordList">病历管理</a></li>
            <li><a href="/adminPersonalCenter">个人信息管理</a></li>
            <li><a href="/adminMedicalTemplate">病历模板管理</a></li>
            <li><a href="/adminUpdateRequest">信息修改申请</a></li>
        </ul>
    </div>
    
    <div class="main-content">
        <div class="info-card">
            
            <!-- 数据卡片行 -->
            <div class="row">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-title">总用户数</div>
                        <div class="stat-value" id="totalUsers">-</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-title">总病历数</div>
                        <div class="stat-value" id="totalMedicalRecords">-</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-title">今日挂号数</div>
                        <div class="stat-value" id="todayRegisters">-</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-title">待就诊数</div>
                        <div class="stat-value" id="pendingRegisters">-</div>
                    </div>
                </div>
            </div>

            <!-- 图表行 -->
            <div class="row">
                <div class="col-md-6">
                    <div class="info-card">
                        <h4>近7天挂号趋势</h4>
                        <div id="registerTrendChart" class="chart-container"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-card">
                        <h4>医生接诊统计</h4>
                        <div id="doctorStatsChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="info-card">
                        <h4>常见诊断分布</h4>
                        <div id="diagnosisChart" class="chart-container"></div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-card">
                        <h4>患者年龄分布</h4>
                        <div id="ageDistributionChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(function(){
    // 初始化图表实例
    const registerTrendChart = echarts.init(document.getElementById('registerTrendChart'));
    const doctorStatsChart = echarts.init(document.getElementById('doctorStatsChart'));
    const diagnosisChart = echarts.init(document.getElementById('diagnosisChart'));
    const ageDistributionChart = echarts.init(document.getElementById('ageDistributionChart'));

    // 加载统计数据
    function loadStatistics() {
        // 加载基础统计数据
        $.ajax({
            url: '/admin/statistics/basic',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data) {
                    $('#totalUsers').text(res.data.totalUsers || 0);
                    $('#totalMedicalRecords').text(res.data.totalMedicalRecords || 0);
                    $('#todayRegisters').text(res.data.todayRegisters || 0);
                    $('#pendingRegisters').text(res.data.pendingRegisters || 0);
                }
            }
        });

        // 加载挂号趋势数据
        $.ajax({
            url: '/admin/statistics/register-trend',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data) {
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: res.data.dates
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data.counts,
                            type: 'line',
                            smooth: true
                        }]
                    };
                    registerTrendChart.setOption(option);
                }
            }
        });

        // 加载医生接诊统计
        $.ajax({
            url: '/admin/statistics/doctor-stats',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data) {
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: res.data.doctors
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data.counts,
                            type: 'bar'
                        }]
                    };
                    doctorStatsChart.setOption(option);
                }
            }
        });

        // 加载诊断分布数据
        $.ajax({
            url: '/admin/statistics/diagnosis-distribution',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data && res.data.data) {
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        series: [{
                            type: 'pie',
                            radius: '50%',
                            data: res.data.data.map(item => ({
                                name: item.diagnosis,
                                value: item.count
                            }))
                        }]
                    };
                    diagnosisChart.setOption(option);
                }
            }
        });

        // 加载年龄分布数据
        $.ajax({
            url: '/admin/statistics/age-distribution',
            type: 'GET',
            success: function(res) {
                if(res.code === 0 && res.data) {
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: res.data.ageRanges
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data.counts,
                            type: 'bar'
                        }]
                    };
                    ageDistributionChart.setOption(option);
                }
            }
        });
    }

    // 页面加载时获取统计数据
    loadStatistics();

    // 窗口大小改变时，重置图表大小
    window.addEventListener('resize', function() {
        registerTrendChart.resize();
        doctorStatsChart.resize();
        diagnosisChart.resize();
        ageDistributionChart.resize();
    });
});
</script>

</body>
</html> 